<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>SVG Plane Animation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">


    <link rel="stylesheet" href="css/style.css">


</head>

<body>
<svg viewBox="0 0 1000 220">
    <path class="planePath" id="planePath" d="M 0 0 C 200 250 250 50 550 150 C 850 250 700 180 1000 200 " />
    <g id="plane" class="plane">
        <polygon class="fill1" points="-141,-10 199,0 -198,-72 -188,-61 -171,-57 -184,-57 " />
        <polygon class="fill2" points="199,0 -141,-10 -163,63 -123,9 " />
        <polygon class="fill3" points="-95,39 -113,32 -123,9 -163,63 -105,53 -108,45 -87,48 -90,45 -103,41 -94,41 " />
        <path class="fill4" d="M-87 48l-21 -3 3 8 19 -4 -1 -1zm-26 -16l18 7 -2 -1 32 -7 -29 1 11 -4 -24 -1 -16 -18 10 23zm10 9l13 4 -4 -4 -9 0z" />
        <polygon class="fill1" points="-83,28 -94,32 -65,31 -97,38 -86,49 -67,70 199,0 -123,9 -107,27 " />
    </g>
    <animateMotion xlink:href="#plane" dur="6s" rotate="auto" repeatCount="indefinite">
        <mpath xlink:href="#planePath" />
    </animateMotion>
</svg>


</body>
</html>
